<template>
	<!-- <view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view> -->

	<view class="head">
		<view class="sousuo">
			<view class="sousuokuang">
				<input type="text" value="" placeholder="请输入需要搜索的内容"/>
			</view>
			
		</view>
		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item"><image src="../../static/c1.png" mode=""></image></view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><image src="../../static/c2.png" mode=""></image></view>
				</swiper-item>
			</swiper>
				
		</view>
		<view class="book">
			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :display-multiple-items="4" class="booksw">
				<swiper-item v-for="(item,index) in cats" :key="index" class="bookbox">
					<view class="swiper-item"><image :src="item.cate_image" mode="">{{item.cate_image}}</image></view>
				</swiper-item>
				
			</swiper>
			
			

		</view>
		
	</view>
	
	
	
</template>

<script>
	export default {
		data() {
			return {
				title: 'HelloXiaohe',
				cats:[]
			}
		},
		onLoad:function() {
			
			uni.request({
				url: 'http://applets.sdacn.net/api/v1/app/audiogrouping',
				method: 'GET',
				data: {},
				success: res => {
					console.log(res)
					console.log(res.data.rows)
					this.cats = res.data.rows
				},
				fail: () => {},
				complete: () => {}
			});
		},
		methods: {

		}
	}
</script>

<style>
	.head{
		width: 100%;
		align-content: center;
		/* align-items: center; */
	}
	.sousuo{
		height: 88upx;
		align-content: center;
		background-color: #d4d4d8;
		
	}
	.sousuokuang{
		/* display: flex; */
		/* align-content: center; */
		/* text-align:center; */
		display: flex;
		justify-content: center;
		background-color: #FFFFFF;
		width: 300upx;
	}
	.booksw{
		/* height: 100upx; */
	}
	
	.swiper-item image{
		width: 90%;
		/* height: 99%; */
	}
	
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
